@import '../globals';

#timeline {
  background-color: $timelineBackgroundColor;
  border-top: 1px solid $lineColor;
  overflow-y: scroll;
  overflow-x: hidden;
}

#slider {
  display: block;
  height: 40px;
}

#timescale {
  width: 100%;
  height: 30px;
  display: block;
  border-bottom: 1px solid $lineColor;

  canvas {
    background-color: #ffffff;
    float: left;
  }
}

#picker {

  div.icon {
    width: 40px;
    height: 40px;
    margin-left: -19px;
    background-image: url('../img/icon_slider.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  position: relative;
  left: 5px;
  top: -37px;
  z-index: 2;
  width: 1px;
  background-color: #000;
  height: 100%;
  display: block;
}

#layerInfoContainer,
#layerContainer {
  margin-top: 5px;
}

#layerInfoContainer {
  width: 25%;
  float: left;
  padding-top: 40px;
}

#layerContainer {
  width: 75%;
  min-height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  float: left;
}

.layerInfo,
.layer {
  width: 100%;
  display: block;
  border: 1px solid $lineColor;
  background-color: $layerBackgroundColor;
  height: 40px;

  &.active {
    border: 1px solid $selectedColor;
  }
}

.layerInfo {
  padding: 5px 0px 0px 0px;
  border-right: 1px solid $lineColor;

  &.active {
    background-color: $highlightColor;
  }

  span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 80%;
    margin: 5px 0px 0px 5px;
    float: left;
  }

  button {
    float: right;
    margin: -3px 5px 0px 0px;
  }
}

.layer {

  border-left: none;

  div {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    cursor: e-resize;
    display: block;

    &.video {
      @include background-image(linear-gradient(transparentize($videoColor, 0.2), $videoColor));
    }

    &.audio {
      @include background-image(linear-gradient(transparentize($audioColor, 0.2), $audioColor));
    }

    &.image {
      @include background-image(linear-gradient(transparentize($imageColor, 0.2), $imageColor));
    }
  }

}


